(async function () {

    const doms = {
        nickname: $('#nickname'),
        loginId: $('#loginId'),
        close: $('.close'),
        chatContainer: $('.chat-container'),
        txtMsg: $('#txtMsg'),
        send: $('button'),
        msgContainer: $('.msg-container'),
    }
    // 验证是否有登录，如果没有登录，跳转到登录页，如果有登录，获取到登录用户信息
    const resp = await API.profile();
    const user = resp.data;
    if (!user) {
        // 未登录提醒、跳转登录
        alert('您还没有登录，请先登录')
        location.href = './login.html';
        return;
    }

    // 注销事件
    doms.close.onclick = function () {
        // 点击之后退出登录，跳转登录页面
        API.loginOut();
        location.href = './login.html';
    }

    // 加载历史记录
    await loadHistory();
    async function loadHistory() {
        const resp = await API.getHistory();
        for (const item of resp.data) {
            addChat(item);
        }
        scrollBottom();
    }


    // 目前是登录的状态
    doms.nickname.innerText = user.nickname;
    doms.loginId.innerText = user.loginId;

    // 添加一条消息,根据消息对象添加到消息队列中
    function addChat(chatInfo) {
        // 创建元素1
        const div = $$$('div');
        div.classList.add('chat-item');
        if (chatInfo.from) {
            div.classList.add('me');
        }
        // 2
        const img = $$$('img');
        img.className = 'chat-avatar';
        img.src = chatInfo.from ? './asset/avatar.png' : './asset/robot-avatar.jpg';
        // 3
        const content = $$$('div');
        content.className = 'chat-content';
        content.innerText = chatInfo.content;

        const date = $$$('div');
        date.className = 'chat-date';
        date.innerText = formatDate(chatInfo.createdAt);

        div.appendChild(img);
        div.appendChild(content);
        div.appendChild(date);
        doms.chatContainer.appendChild(div);
    }

    // 将聊天窗口的滚动条一开始滚动到最下方
    function scrollBottom() {
        const top = doms.chatContainer.scrollHeight;
        doms.chatContainer.scrollTop = top;
    }

    // 转换时间戳为具体时间
    function formatDate(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        // 月份是从0开始的，所以要加一
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hour = date.getHours().toString().padStart(2, '0');
        const minute = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} / ${hour}:${minute}:${seconds}`;
    }

    // 发送消息
    async function sendChat() {
        const content = doms.txtMsg.value.trim();
        if (!content) {
            // 没有输入内容不予回应
            return;
        }
        // 有内容继续执行下面代码
        addChat({
            from: user.loginId,
            to: null,
            content,
            createdAt: Date.now(),

        });
        doms.txtMsg.value = '';
        scrollBottom();
        const resp = await API.sendChat(content);
        addChat({
            from: null,
            to: user.loginId,
            ...resp.data,
        });
        scrollBottom();
    }


    // 发送消息事件
    doms.msgContainer.onsubmit = function (e) {
        // 阻止表单默认刷新行为
        e.preventDefault();

        // 调用sendchat方法
        sendChat();
    }

})();